<template>
    <div class="order-container">
        <div class="order" v-for="(item,i) in info" :key="i">
            <span class="cinema">{{item.cinemaName}}</span>
            <span class="film">
                <img :src="item.filmImg">
                <span class="film-info">
                    <span class="h1">{{item.filmName}}</span>
                    <span>{{item.date}}</span>
                    <span>{{item.hall}} <span v-for="i in item.seat" :key="i">{{i}}</span></span>
                </span>
            </span>
            <span class="order-status">
                <span>总价：{{item.price}}元</span>
                <span>已完成</span>
            </span>
        </div>
    </div>    
</template>
<script>
export default {
    data(){
        return{
            info:[]
        }
    },
    created(){
        this.$store.commit("changeTitle","我的订单")
        // console.log(this.$store.getters.getTitle)
        let user = this.$cookies.get('accoutCookie')
        if(JSON.parse(localStorage.getItem(user))){
            this.info=JSON.parse(localStorage.getItem(user))
        }
        console.log(this.info)
    },
    methods:{
        
    }
}
</script>
<style lang="scss" scoped>
.order-container{
    .order{
        width: 100%;
        height: 170px;
        border-bottom: 10px solid rgb(231, 231, 231);
        color: rgb(160, 159, 159);
        font-size: 13px;
        .cinema{
            display: flex;
            font-size: 13px;
            width: 100%;
            height: 25px;
            border-bottom: 1px solid rgb(231, 231, 231);
            padding-left: 10px;
            align-items: center;
        }
        .film{
            display: flex;
            margin-top: 10px;
            margin-left: 10px;
            border-bottom: 1px solid rgb(231, 231, 231);
            padding-bottom: 10px;
            img{
                width: 60px;
                height: 80px;
            }
            .film-info{
               display: flex;
               flex-direction: column; 
               margin-left: 10px;
               .h1{
                   font-size: 14px;
                   font-weight: bold;
                   color: rgb(29, 29, 29);
                   margin-bottom: 5px;
               }
            }
        }
        .order-status{
            display: flex;
            height: 30px;
            padding: 0 10px;
            justify-content: space-between;
            align-items: center;
            span:nth-child(2){
                color: black;
            }
        }
    }
}
</style>
